<template>
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="500px" :title="title" :showCancelBtn="false" :showOkBtn="false">
      <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
        <a-form-item name="email">
          <a-input size="large" v-model:value="formState.email" placeholder="请输入新邮箱" />
        </a-form-item>
        <a-form-item name="code">
          <CountdownInput
            :toUser="formState.email"
            size="large"
            v-model:value="formState.code"
            :enableManMachineVerify="true"
            :bizType="BizType.UPDATE_ACCOUNT"
            :taskCode="TaskCode.VERIFY_EMAIl"
            placeholder="输入6位验证码"
            v-model:verify-info="verifyInfo"
            :sendCodeApi="sendCaptchaMsg"
          />
        </a-form-item>
        <a-form-item>
          <a-button size="large" type="primary" block @click="updateEmail"> 确认 </a-button>
        </a-form-item>
      </a-form>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup name="user-replace-email-modal">
  import { watch } from "vue"
  import BasicModal from "/@/components/Modal/src/BasicModal.vue"
  import { CountdownInput } from "/@/components/CountDown"
  import { useUserStore } from "/@/store/modules/user"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { defineEmits, ref, reactive, toRaw } from "vue"
  import { useModalInner } from "/@/components/Modal"
  import { sendCaptchaMsg } from "/@/api/sys/msgPush"
  import { TaskCode, BizType } from "/@/api/sys/model/msgPushModel"
  import { SmsEnum } from "/@/views/sys/login/useLogin"
  import { Rule } from "/@/components/Form"
  import { rules } from "/@/utils/helper/validator"
  import { Form, Row, Col } from "ant-design-vue"
  import { updateAccount } from "../api"
  import Icon from "/@/components/Icon"

  const verifyInfo = ref<any>({})
  const userStore = useUserStore()
  const { createMessage } = useMessage()
  const formState = reactive<Record<string, any>>({
    email: "",
  })
  const formRef = ref()

  const validatorRules: Record<string, Rule[]> = {
    email: [{ required: true, type: "email", message: "邮箱格式不正确" }],
  }
  const useForm = Form.useForm
  const title = ref<string>("")
  const emit = defineEmits(["register", "success"])
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    formRef.value.resetFields()
    formRef.value.clearValidate()
    setModalProps({ confirmLoading: false })
    title.value = "修改邮箱"
  })

  /**
   * 更新手机号
   */
  async function updateEmail() {
    await formRef.value.validateFields()
    if (!verifyInfo.value.toUser) {
      createMessage.warning("请先发送验证码")
      return
    }
    updateAccount({ ...formState, ...verifyInfo.value }).then((res) => {
      if (res.success) {
        createMessage.success("修改邮箱成功")
        emit("success")
        closeModal()
      } else {
        createMessage.warning(res.message)
      }
    })
  }
</script>

<style scoped></style>
